<template>
  <div class>
    <el-tabs type="border-card" v-model="tabIndex" style="margin:0;">
      <el-tab-pane
        v-for="(item,index) in dataList"
        :key="index"
        :name="index+''"
        :label="item.DATA_TYPE"
      >
        <div
          style="min-height:200px;padding-bottom:80px;position:relative"
          v-if="item.DATA_TYPE!='ICFR'&&item.DATA_TYPE!='DMG REPORT'"
        >
          <div>
            <div v-if="item.urls.length==0||item.FILE_STATUS=='N/A'">暂无文件</div>
            <viewer :images="item.urls">
              <div class="flieImgBox" v-for="(items,index) in item.urls" :key="index">
                <img class="flieImg" :src="items.url" alt />
              </div>
            </viewer>
          </div>

          <el-form size="mini" inline label-width="80px">
            <el-form-item label="操作人员:" v-if="item.CREATE_USER_NAME">
              <div>{{item.CREATE_USER_NAME}} {{item.ROLE_NAME}} {{item.CREATE_TIME}}</div>
            </el-form-item>

            <el-form-item label="确认人员:" v-if="item.COFIM_USER_NAME">
              <div>{{item.COFIM_USER_NAME}} {{item.COFIM_ROLE_NAME}} {{item.COFIM_TIME}}</div>
            </el-form-item>
          </el-form>

          <div style="position:absolute;bottom:10px ;left:10px">
            <el-button
              type="primary"
              v-if="((item.DATA_TYPE=='Container Administration'&&isAuthBtn('extra26'))||
              (item.DATA_TYPE=='ICFR'&&isAuthBtn('extra9'))||
              (item.DATA_TYPE=='理货报告'&&isAuthBtn('extra17'))||
              (item.DATA_TYPE=='进港航班货物登记表'&&isAuthBtn('extra20'))||
              (item.DATA_TYPE=='Quaruantine Feedback Report'&&isAuthBtn('extra28'))||
              (item.DATA_TYPE=='进港温控药品操作流程检查单'&&isAuthBtn('extra32'))||
              (item.DATA_TYPE=='DMG REPORT'&&isAuthBtn('extra36'))||
              (item.DATA_TYPE=='邮路单'&&isAuthBtn('extra40'))||
              (item.DATA_TYPE=='VAL进港检查单'&&isAuthBtn('extra44'))||
              (item.DATA_TYPE=='其他文件'&&isAuthBtn('extra48')))&&item.FILE_STATUS!=='N/A'&&(item.FILE_STATUS!=='已完成')"
              size="small"
              @click="addOrUpdateHandle(item.ID)"
            >上传</el-button>
            <el-button
              type="primary"
              v-if="((item.DATA_TYPE=='Container Administration'&&isAuthBtn('extra27'))||
              (item.DATA_TYPE=='ICFR'&&isAuthBtn('extra16'))||
              (item.DATA_TYPE=='理货报告'&&isAuthBtn('extra20'))||
              (item.DATA_TYPE=='进港航班货物登记表'&&isAuthBtn('extra23'))||
              (item.DATA_TYPE=='Quaruantine Feedback Report'&&isAuthBtn('extra31'))||
              (item.DATA_TYPE=='进港温控药品操作流程检查单'&&isAuthBtn('extra35'))||
              (item.DATA_TYPE=='DMG REPORT'&&isAuthBtn('extra39'))||
              (item.DATA_TYPE=='邮路单'&&isAuthBtn('extra43'))||
              (item.DATA_TYPE=='VAL进港检查单'&&isAuthBtn('extra47'))||
              (item.DATA_TYPE=='其他文件'&&isAuthBtn('extra51')))&&(item.urls.length==0)&&(item.FILE_STATUS!=='N/A')&&(item.FILE_STATUS!=='已完成')"
              size="small"
              @click="changeStatus(item.ID,'N/A')"
            >N/A</el-button>
            <el-button
              type="primary"
              v-if="((item.DATA_TYPE=='Container Administration'&&isAuthBtn('extra25'))||
              (item.DATA_TYPE=='ICFR'&&isAuthBtn('extra10'))||
              (item.DATA_TYPE=='理货报告'&&isAuthBtn('extra18'))||
              (item.DATA_TYPE=='进港航班货物登记表'&&isAuthBtn('extra21'))||
              (item.DATA_TYPE=='Quaruantine Feedback Report'&&isAuthBtn('extra29'))||
              (item.DATA_TYPE=='进港温控药品操作流程检查单'&&isAuthBtn('extra33'))||
              (item.DATA_TYPE=='DMG REPORT'&&isAuthBtn('extra37'))||
              (item.DATA_TYPE=='邮路单'&&isAuthBtn('extra41'))||
              (item.DATA_TYPE=='VAL进港检查单'&&isAuthBtn('extra45'))||
              (item.DATA_TYPE=='其他文件'&&isAuthBtn('extra49'))) &&(item.FILE_STATUS!=='已完成')  "
              size="small"
              @click="changeStatus(item.ID,'已完成')"
            >确认</el-button>
          </div>
        </div>
        <div style="min-height:200px;padding-bottom:80px;position:relative" v-else>
          <el-table
            v-if="item.DATA_TYPE=='DMG REPORT'"
            :data="item.urls"
            stripe
            style="width: 100%;height:100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          >
            <el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
            <el-table-column prop="CREATE_TIME" header-align="center" align="center" label="日期"></el-table-column>
            <el-table-column prop="id" header-align="center" align="center" label="序列号"></el-table-column>
            <el-table-column prop="FLIGHT_NO" header-align="center" align="center" label="航班号"></el-table-column>
            <el-table-column prop="FLIGHT_DATE" header-align="center" align="center" label="航班日期"></el-table-column>
            <el-table-column prop="MAWB_NO" header-align="center" align="center" label="总运单号"></el-table-column>
            <el-table-column prop="DAMAGED_NUM" header-align="center" align="center" label="破损件数"></el-table-column>
          </el-table>
          <el-table
            v-if="item.DATA_TYPE=='ICFR'"
            :data="item.urls"
            stripe
            style="width: 100%;height:100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          >
            <el-table-column prop="AWB" header-align="center" align="center" label="AWB"></el-table-column>
            <el-table-column prop="PCSEXP" header-align="center" align="center" label="Pcs Exp"></el-table-column>
            <el-table-column
              prop="PCSRCVD"
              show-overflow-tooltip
              header-align="center"
              align="center"
              label="Pcs Rcvd"
            ></el-table-column>
            <el-table-column prop="WEIGHT" header-align="center" align="center" label="Weight"></el-table-column>
            <el-table-column prop="ORG" header-align="center" align="center" label="ORG"></el-table-column>
            <el-table-column prop="DES" header-align="center" align="center" label="DES"></el-table-column>
            <el-table-column prop="AGENT" header-align="center" align="center" label="Agent"></el-table-column>
            <el-table-column prop="COMMODITY" header-align="center" align="center" label="Commodity"></el-table-column>

            
          </el-table>

          <div style="position:absolute;bottom:10px ;left:10px">
            <el-upload
              v-if="(item.DATA_TYPE=='ICFR'&&isAuthBtn('extra9')) &&(item.FILE_STATUS!=='已完成')"
              style="display:inline-block;margin-right:10px"
              accept="text/plain"
              action="/"
              :http-request="uploadImgFile"
              multiple
              :show-file-list="false"
            >
              <el-button size="small" type="primary" @click="rowId=item.ID">上传文件</el-button>
            </el-upload>
            <el-button
              type="primary"
              v-if="((item.DATA_TYPE=='ICFR'&&isAuthBtn('extra10'))|| (item.DATA_TYPE=='DMG REPORT'&&isAuthBtn('extra37'))) &&(item.FILE_STATUS!=='已完成')  "
              size="small"
              @click="changeStatus(item.ID,'已完成')"
            >确认</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- <div style="padding: 20px 20px 0;text-align:right" v-if="formId">
      <el-button type="success" @click="addDateForm()">新增</el-button>
    </div>-->

    <TakePhoto v-if="addOrUpdateVisible" ref="addOrUpdate" @uploadImg="uploadImg" />
    <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="visible" append-to-body>
      <el-form label-width="110px" :inline="true">
        <el-form-item label="特殊货物">
          <el-input style="width:200px" v-model="dataForm.GOODS_NAME" placeholder></el-input>
        </el-form-item>
        <el-form-item label="票数">
          <el-input style="width:200px" type="number" v-model="dataForm.GOODS_NUM" placeholder></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import TakePhoto from "./takePhoto";
import axios from "axios";

export default {
  props: {
    formId: {
      default: 0
    }
  },
  components: { TakePhoto },
  data() {
    return {
      tabIndex: "0",
      visible: false,
      dataForm: {},
      rowId: "",
      dataList: [],
      fileReader: "",
      addOrUpdateVisible: false
    };
  },
  computed: {},
  mounted() {
    this.fileReader = new FileReader();
  },
  methods: {
    init(data) {
      this.dataList = data;
    },
    uploadImgFile(options) {
      let file = options.file;
      let filename = file.name;
      let param = new FormData();
      console.log(file.type);
      param.append("name", filename);
      param.append("ID", this.rowId);

      //通过append向form对象添加数据
      param.append("files", file);
      param.append("reportId", sessionStorage.reportid);
      param.append("FLIGHT_NUM", sessionStorage.flighNum);
      param.append("FLIGHT_DATE", sessionStorage.flighDate);

      //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      // console.log(param.get("file"));
      let config = {
        //添加请求头
        headers: { "Content-Type": "multipart/form-data" },
        //添加上传进度监听事件
        onUploadProgress: e => {
          var completeProgress = (((e.loaded / e.total) * 100) | 0) + "%";
          this.progress = completeProgress;
        }
      };

      axios
        .post(this.$http.adornUrl(`/air/queryFileDate`), param, config)
        .then(({ data }) => {
          if (data.result == 1) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$emit("refsherData", sessionStorage.reportid);
              }
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      //  /air/queryFileDate
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.rowId = id;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    addDateForm() {
      this.dataForm = {
        REPORT_ID: sessionStorage.reportid,
        GOODS_NAME: "",
        GOODS_NUM: "",
        TALLY_FINISH_TIME: "",
        WAREHOUSE_CHECK: "",
        AIR_TYPE: "",
        OUTTIME_CHECK: ""
      };
      this.visible = true;
    },
    openDetails() {},
    changeStatus(id, status) {
      this.$http({
        url: this.$http.adornUrl(`/air/file_NA`),
        method: "post",
        data: this.$http.adornData({
          FILE_STATUS: status,
          REPORT_ID: sessionStorage.reportid,
          ID: id
        })
      }).then(({ data }) => {
        if (data && data.result == "1") {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$emit("refsherData", sessionStorage.reportid);
            }
          });
        } else {
          this.$message.error(data.message);
        }
      });
    },
    uploadImg(imgList) {
      this.$http({
        url: this.$http.adornUrl(`/air/file_upload`),
        method: "post",
        data: this.$http.adornData({
          FILE_URL: imgList.join(","),
          REPORT_ID: sessionStorage.reportid,
          ID: this.rowId
        })
      }).then(({ data }) => {
        if (data && data.result == "1") {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$emit("refsherData", sessionStorage.reportid);
            }
          });
        } else {
          this.$message.error(data.message);
        }
      });
    },
    delClick() {
      this.$confirm(`确定对[]进行[删除}]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    }
  },
  mounted() {
    // this.getCompetence();
  },
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin: 0;
}
.wrapPage {
  padding-top: 30px;
}
.opert {
  padding-top: 30px;
  text-align: center;
}
.contentBox {
  padding-top: 30px;
  justify-content: center;
  display: flex;
  padding-left: 30px;
  padding-right: 30px;
  flex-wrap: wrap;
}
.flieImgBox {
  display: inline-block;
  width: 60px;
  height: 90px;
  background-color: #f2f2f2;
  margin-right: 10px;
}
.flieImg {
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.imgBox {
  width: 180px;
  height: 220px;
  background-color: #f0f2f5;
  border: 1px solid #d6d6d6;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  flex-direction: column;
  .texts {
    margin-top: 20px;
  }
}
.imgfile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;

  img {
    width: 100%;
  }
  .delBox {
    padding: 5px 20px;
    border: 1px solid #d6d6d6;
    border-radius: 20px;
    margin-top: 10px;
    cursor: pointer;
    &:hover {
      background-color: #3e8ef7;
      color: #fff;
    }
  }
}
</style>